<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Vendor styles -->
    <link rel="stylesheet" href="../../static/css/material-design-iconic-font.min.css">
    <link rel="stylesheet" href="../../static/css/animate.min.css">
    <link rel="stylesheet" href="../../static/css/jquery.scrollbar.css">

    <link rel="stylesheet" href="../../static/css/select2.css">
    <link rel="stylesheet" href="../../static/css/nouislider.min.css">

    <!-- App styles -->
    <link rel="stylesheet" href="../../static/css/app.min.css">

    <!-- Javascript -->
    <script src="../../static/js/jquery.min.js"></script>
    <script src="../../static/js/popper.min.js"></script>
    <script src="../../static/js/bootstrap.min.js"></script>
    <script src="../../static/js/jquery.scrollbar.min.js"></script>
    <script src="../../static/js/jquery-scrollLock.min.js"></script>

    <script src="../../static/js/select2.full.min.js"></script>
    <script src="../../static/js/nouislider.min.js"></script>

    <!-- layer -->
    <script src="../../static/js/layer/layer.js"></script>

    <!-- App functions and actions -->
    <script src="../../static/js/app.js"></script>
    <style>
        html, body {
            height: 100%;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div style="padding: 20px;">
    <form>
        <div class="form-group">
            <label>告警阈值：</label>
            <div class="input-group input-group-sm mb-4">
                <div class="input-group-prepend">
                    <span class="input-group-text">电压（低于/V）</span>
                </div>
                <input type="number" class="form-control">
                <i class="form-group__bar"></i>
            </div>
            <div class="input-group input-group-sm mb-4">
                <div class="input-group-prepend">
                    <span class="input-group-text">温度（大于/℃）</span>
                </div>
                <input type="number" class="form-control">
                <i class="form-group__bar"></i>
            </div>
            <div class="input-group input-group-sm mb-4">
                <div class="input-group-prepend">
                    <span class="input-group-text">湿度（大于/RH）</span>
                </div>
                <input type="number" class="form-control">
                <i class="form-group__bar"></i>
            </div>
            <div class="input-group input-group-sm mb-4">
                <div class="input-group-prepend">
                    <span class="input-group-text">烟雾浓度（大于/ppm）</span>
                </div>
                <input type="number" class="form-control">
                <i class="form-group__bar"></i>
            </div>
        </div>
        <div class="form-group">
            <label>安全温度范围：（<span id="min"></span> ℃） ~ （<span id="max"></span> ℃）</label>
            <div id="input-slider-range" class="input-slider--blue"></div>
        </div>
        <div>
            <button id="submit" type="button" class="btn btn-primary">确定</button>
            <button id="cancel" type="button" class="btn">取消</button>
        </div>
    </form>
</div>
<script>

    $(function () {
        var domSliderRange = document.getElementById("input-slider-range");
        var minInit = 10, maxInit = 300;
        var minV = -100, maxV = 500;
        noUiSlider.create(domSliderRange, {
            start: [minInit, maxInit],
            connect: !0,
            range: {min: minV, max: maxV}
        }), domSliderRange.noUiSlider.on("update", function (a, b, c) {
            var min = c[0].toFixed(1), max = c[1].toFixed(1);
            $('#min').html(min);
            $('#max').html(max);
        });
    });

    $("#submit").on('click', function () {

    });

    $("#cancel").on('click', function () {
        parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭窗口
    });
</script>

</body>
</html>